<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    2. 定义一个 vuejs 管理的区域

    {{  }} 我们称之为 插值表达式，使用该表达式可以把 vuejs 管理的数据直接插入到这里
-->
<div id="app">
    <h2>{{ title }}</h2>
</div>

<div id="box">
    <h2>非Vue管理的区域是无法使用 {{ title }}</h2>
</div>

</body>
<!--
1. 导入 vue.js文件
-->
<script src="lib/vue/vue.js"></script>

<script type="text/javascript">
    // <!--3. 进行实例化Vue-->

    console.log('当我们引入 vue.js 文件后，会在全局提供一个 Vue 构造函数', Vue);

    new Vue({
        // el 是一个选择器，这里使用的 #app 就是第二步定义的 vuejs 管理区域的 id选择器
        el: '#app',

        // vuejs 管理的数据
        data: {
            title: 'vuejs 入门使用'
        }
    })

    new Vue({
        el: '#box',
        data: {
            title: '我是 vuejs 管理的另外一个区域'
        }
    })


</script>

</html>
